<template>
	<view  @click="closeShopNameList()">
		<view class="timer-box">
			<view class="time-img">
				<image src="/static/images/timer.png"></image>
			</view>
			<view class="timer-text">
				{{nowTime|formatTimeMin}}
			</view>
		</view>
		<view class="line-height"></view>
		<view class="companyaddress">
			{{formatted_address}}
		</view>
		<view class="mapBox">
			 <map style="width: 100%; height: 400rpx;" :latitude="latitude" :longitude="longitude" :markers="covers"> </map>
		</view>
		<view class="input-group">
			<view class="input-group-item-content">
				<view class="input-group-item look" >
					<view class="left-box">
						<view class="text">拜访商户</view>
						<view class="input-box">
							<input placeholder-class="inputplace" @click.stop="" @input="inputChange"  placeholder="输入拜访商户名称" v-model="shopName" type="text">
						</view>
					</view>
					<view class="right-img" @click="skipToShopList()">
						<image src="/static/images/xzsj.png"></image>
					</view>
				</view>
				
				<view class="input-group-item-height">
					
				</view>
				<view class="shopmnamelist"  v-if="nameLikeUsers" >

					
					<view class="shopitem-content">
						<view class="shopitem" v-for="(item,index) in shopNameList" :key="index" v-if ="index<5" @click="putShopName(item)"   >
							<view class="left-text">
								{{item.shopName}}
							</view>
							<view class="right">
								<image src="/static/images/left-row.png"></image>
							</view>
						</view>
						<view class="input-group-item-height second">
							
						</view>
					</view>
				</view>
			</view>
			<view class="input-group-item-content">
				<view class="input-group-item">
					<view class="left-box">
						<view class="text">联系电话</view>
						<view class="input-box">
							<input placeholder-class="inputplace" placeholder="输入拜访商户联系电话" v-model="mobile" type="text">
						</view>
						
					</view>
				</view>
				
				<view class="input-group-item-height">
					
				</view>
			</view>
			<view class="input-group-item-content">
				<view class="input-group-item">
					<view class="left-box">
						<view class="text">店铺地址</view>
						<view class="input-box">
							<!-- <input placeholder-class="inputplace" placeholder="输入拜访商户详细地址,限制在50个字" v-if="addressdisabled"  disabled="false" v-model="address" type="text"> -->
							
							<input placeholder-class="inputplace" placeholder="输入拜访商户详细地址,限制在50个字" maxlength="50"  v-if="!addressdisabled"  @input="addressCheck()"  v-model="address" type="text">
						</view>
						
					</view>
				</view>
			</view>
			
			<view class="qd-button">
				<view class="qd-button-content" @click="skipToSignInDetail()">
					<view class="text">签到</view>
					<view class="timer">{{nowTimeOnlyMin|formatTimeOnlyMin}}</view>
				</view>
				<view class="wqd">
					{{checkInNuMessgee}}
				</view>
			</view>
	
		</view>
	</view>
</template>

<script>
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	const util = require("../../utils/util.js");
	//获取应用实例
	const api = require("../../config/api.js");
	export default {
		data() {
			 return {
			      // id:0, // 使用 marker点击事件 需要填写id
				  addressdisabled:false,
				title: 'map',
				latitude: "",
				longitude: "",
				covers: [{
					latitude:"",
					longitude: "",
					iconPath: '../../../static/location.png'
				}],
				alladdress:'',
				address:'',
				mobile:"",
				shopName:'',
				shopInfor:{},
				ishaveGetAddress:true,
				nowTime:'',
				nameLikeUsers:false,
			
				checkInNum:'',
				checkInNuMessgee:"",
				formatted_address:"定位中...",
				
				shopNameList:'',
				timer: '', //用来清除定时器
				
				
			}
		},
		components: {
		            avatar
		},
		onLoad(){
			var _that = this;
			
			
			},
		//
		 /**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {
			clearInterval(this.timer)
			this.timer = null
		},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			clearInterval(this.timer)
		},
	
		onShow() {
			var _that = this;
			
			_that.getLocation();
			_that.getNowTime();
			_that.timer= 	setInterval(function(res){
					// 获取当前的系统时间
					_that.getNowTime();
				},1000);
			_that.getShopINfor();
			_that.checkStatistics();
		},
		filters: {
		  capitalize: function (value) {
		    if (!value) return ''
		    value = value.toString()
		    return value.charAt(0).toUpperCase() + value.slice(1)
		  },
		  
		  formatTimeMin:function (a) {
			 if (!a) return '- - -'
		  	var myDate = new Date(parseInt(a) );
		  	var datestr = "";
		  	datestr = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
		  	datestr =  datestr + "-"+ ((myDate.getMonth() + 1) < 10 ? "0" + (myDate.getMonth() + 1) : (myDate.getMonth() + 1)); //获取当前月份(0-11,0代表1月
		  	datestr = datestr + "-" + (myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()); //获取当前日(1-31)
		  	datestr = datestr + " " + (myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()); //获取当前时
		  	datestr = datestr + ":" + (myDate.getMinutes() < 10 ? "0" + myDate.getMinutes() : myDate.getMinutes()); //获取当前分
		  	return datestr;
		  },
		  formatTimeOnlyMin:function (a) {
		  			 if (!a) return '- - -'
		  	var myDate = new Date(parseInt(a) );
		  	var datestr = "";
		  	// datestr = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
		  	// datestr =  datestr + "-"+ ((myDate.getMonth() + 1) < 10 ? "0" + (myDate.getMonth() + 1) : (myDate.getMonth() + 1)); //获取当前月份(0-11,0代表1月
		  	// datestr = datestr + "-" + (myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()); //获取当前日(1-31)
		  	datestr =  (myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()); //获取当前时
		  	datestr = datestr + ":" + (myDate.getMinutes() < 10 ? "0" + myDate.getMinutes() : myDate.getMinutes()); //获取当前分
		  	return datestr;
		  }
		},
		methods: {
			addressCheck(){
				if(this.address.length>=50){
					console.log('this.address',this.address);
					console.log(this.address.length);
					uni.showToast({
						title:'输入店铺的地址过长!',
						icon:'none'
					})
					return false;
				}
				
			},
			closeShopNameList(){
				this.nameLikeUsers = false
			},
			putShopName(obj){
				console.log(obj);
				var shopName =obj.shopName;
				
				this.shopName = shopName;
				this.mobile = obj.mobile;
				this.address = obj.address;
				
				// 赋值id 
				this.shopInfor.userId = obj.userId;
				
				this.nameLikeUsers = false;

				
			},
			
			checkStatistics(){
				var  _that = this;
				let daySart=new Date(new Date().toLocaleDateString()).getTime();
				let dayEnd=new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
				daySart = _that.formatTimeSecond(daySart);
				dayEnd = _that.formatTimeSecond(dayEnd);
				console.log(daySart);
				console.log(dayEnd);
				var data =  new Object();
				data.from= daySart;
				data.to = dayEnd;
				util.request(api.checkStatistics , data, "POST").then(res => {
					console.log("签到查询返回",res);
					if(res.error==0){
						if(res.data){
							var checkInNum = res.data.checkInNum;
							_that.checkInNum = checkInNum;
							if(checkInNum==0){
								_that.checkInNuMessgee = '今日你还未签到';
							}else{
								_that.checkInNuMessgee = '今日签到'+checkInNum+'次';
							}
							
						}
					}
					
				})
				
			},
			
			formatTimeSecond:function (a) {
						 if (!a) return '- - -'
				var myDate = new Date(parseInt(a) );
				var datestr = "";
				datestr = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
				datestr =  datestr + "-"+ ((myDate.getMonth() + 1) < 10 ? "0" + (myDate.getMonth() + 1) : (myDate.getMonth() + 1)); //获取当前月份(0-11,0代表1月
				datestr = datestr + "-" + (myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()); //获取当前日(1-31)
				datestr = datestr + " " + (myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()); //获取当前时
				datestr = datestr + ":" + (myDate.getMinutes() < 10 ? "0" + myDate.getMinutes() : myDate.getMinutes()); //获取当前分
				datestr = datestr + ":" + (myDate.getSeconds() < 10 ? "0" + myDate.getSeconds() : myDate.getSeconds()); //
				return datestr;
			},
			getNowTime(){
				var timestamp=new Date().getTime();
				this.nowTime = timestamp;
				this.nowTimeOnlyMin= timestamp;
				// console.log(timestamp);
			},
			inputChange(){
				var _that= this;
				console.log("输入框变化");
				// 输入框变化请求模糊搜索接口
				console.log('this.shopName',this.shopName);
				if(this.shopName){
					// 请求模糊搜索接口
					var data =  new Object();
					data.shopName = _that.shopName;
					data.userId='';
					util.request(api.nameLikeUsers, data, "POST").then(res => {
						console.log("返回参数",res);
						if(res.data.length!=0){
							// 不为空
							_that.nameLikeUsers=true;
							_that.shopNameList = res.data;
							
						}else{
							console.log("进入返回空判断");
							_that.mobile='';
							_that.address ='';
							_that.nameLikeUsers=false
						}
						
					})
					
				}else{
					_that.nameLikeUsers=false;
				}
				
			},
			
			
			getLocation(){
				var _that = this;
				
				uni.getLocation({
					
				    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				    success: function (res) {
						console.log("获取地址",res);
				        _that.latitude = res.latitude;
				        _that.longitude = res.longitude;
						_that.covers[0].latitude= res.latitude;
						_that.covers[0].longitude= res.longitude;
						
						
				        util.request('https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' + res.longitude + ',' + res.latitude +
				        	'&key=a89faaa536c121f8eae57d201b8c86c5&radius=1000&extensions=all', {}, "GET").then(res => {
				        	console.log(res);
							var addressComponent = res.regeocode.addressComponent;
							var alladdress = addressComponent.province +addressComponent.city +addressComponent.district;
							var formatted_address = res.regeocode.formatted_address;
							
							_that.alladdress = alladdress;
							_that.formatted_address = formatted_address;
							console.log("地理位置",_that.alladdress);
							
				        })
						
				    },
					fail:function(res){
						// 获取地理位置失败  不能
						_that.ishaveGetAddress=false;
						_that.formatted_address  = '获取地理位置失败,请检查手机位置开关设置!'
						console.log("执行失败");
					}
				});
			},
			
			skipToShopList(){
				uni.navigateTo({
					url:'/pages/shopList/shopList'
				})
			},
			skipToSignInDetail(){
				var that = this;
				
				// 如果获取地址失败就不让签到、
				if(!that.ishaveGetAddress){
					uni.showToast({
						title:'获取地址失败,请查看手机是否打开定位!',
						icon:'none'
					})
					return false;
				}
				if(!this.shopName){
					uni.showToast({
						title:'请输入拜访商户名称!',
						icon:'none'
					})
					
					return false;
				}
				
				
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				
				if (!strTemp.test(this.mobile)) {
				  return uni.showToast({
				    title: '请核对手机号',
				    icon: 'none'
				  });
				}
				
				if(!this.address){
					console.log('this.address',this.address);
					console.log(this.address.length);
					uni.showToast({
						title:'请输入店铺地址!',
						icon:'none'
					})
					return false;
				}
				if(this.address.length>50){
					console.log('this.address',this.address);
					console.log(this.address.length);
					uni.showToast({
						title:'输入店铺的地址过长!',
						icon:'none'
					})
					return false;
				}
				console.log(this.address.length);
				var signaddress = that.alladdress +that.address;
				console.log(signaddress);
				// 跳转签到页面 设置 请求接口需要的信息缓存
				var signInfor = new Object();
				 signInfor.address = that.address;
				 signInfor.latitude = that.latitude;
				 signInfor.longitude = that.longitude;
				 signInfor.mobile = that.mobile;
				 signInfor.userId = that.shopInfor.userId?that.shopInfor.userId:"";
				 signInfor.merchantName = that.shopName;
				 signInfor.name = that.shopInfor.nickname?that.shopInfor.nickname:'';
				 
				uni.setStorageSync('signInfor',signInfor);
				uni.setStorageSync('signaddress',signaddress);
				 
				// uni.navigateTo({
				// 	url:'/pages/signinDetail/signinDetail';
				// })
				
				uni.navigateTo({
					url:'/pages/signinDetail/signinDetail'
				})
			},
			getShopINfor(){
				
				var putShopInfor = uni.getStorageSync('putShopInfor');
				// 有缓存push数据到页面
				// console.log('shopInfor',shopInfor);
				var  isGetShopInforStorage = uni.getStorageSync('isGetShopInforStorage');
				if(isGetShopInforStorage&&putShopInfor){
					
				
					// this.shopInfor = shopInfor;
					this.shopName = putShopInfor.shopName;
					this.mobile = putShopInfor.mobile;
					this.address = putShopInfor.address;
				}else{
					this.shopName ='';
					this.mobile = '';
					this.address = '';
				}
			}
		}
	}
</script>

<style>
	@import url("./signinCenter.css");
</style>
